<template>
    <view class="rx-textarea">
        <uv-textarea
            v-model="curValue"
            :autoHeight="autoHeight"
            :count="count"
            :maxlength="maxlength"
            @change="handleChange"
            @blur="handleBlur"
            @focus="onFocus"
            :placeholder="placeholder"
            :disabled="readOnly"
        ></uv-textarea>
        <uv-icon v-if="curValue && metadata.options.allowClear && !readOnly" @click="onAllowClear" class="icon-delete" name="close-circle"></uv-icon>
    </view>
</template>

<script>
import MForm from "../js/MForm";
import Util from '@/js/Util.js'

export default {
    name: "MTextarea",
    mixins:[MForm],
    data() {
        return {
            curValue:""
        }
    },
    computed:{
        autoHeight(){
            return this.metadata.options.autosize || false;
        },
        count(){
            //显示数字
            return this.metadata.options.showCount || false;
        },
        maxlength(){
            let maxlength=this.metadata.options.maxlength;
            if( maxlength && maxlength!=0){
                return this.metadata.options.maxlength
            }
            return -1;
        },
    },
    created() {
        if(this.value){
            this.curValue = this.value.trim();
        }
    },
    methods: {
        handleChange:Util.debounce(function (value) {
            if(this.curValue){
                this.curValue= this.curValue.trim();
            }
            this.setData(this.curValue);
        },500),
        handleBlur(e){
            let value=e.detail.value;
            this.updateValue(value);
            this.triggerEmitEvents('blur',value)
        },
        onFocus(e){
            let value=e.detail.value;
            this.triggerEmitEvents('focus',value)
        },
        setCurValue(value){
            this.curValue = value;
            this.updateValue(value);
        },
        onAllowClear(){
            this.curValue = ''
            this.setData(this.curValue);
        }
    },
    watch: {
        value:{
            handler(val){
                this.curValue = val ;
            },
            deep:true
        }
    },
}
</script>

<style scoped>
.rx-textarea{
    position: relative;
}
.icon-delete{
    position: absolute;
    right: 0.5rem;
    bottom: 0.6rem;
}
</style>
